<template>
  <div class="root">
    <div class="icon">
      <img src="../../../assets/images/首页logo.png">
      <span>云医通</span>
    </div>
    <el-form :model="user" :rules="rules_login" ref="form_login_user" class="login">
      <!-- 账号 -->
      <div class="user">
        <p class="user-account">账号:</p>
        <el-form-item prop="account">
          <el-input style="width: 300px;font-size: 18px;margin-left: 10px;margin-top: 10px;" 
          size="small" v-model="user.account"
          placeholder="请输入用户名"></el-input>
        </el-form-item>
      </div>
      <!-- 密码 -->
      <div class="user">
        <p class="user-account">密码:</p>
        <el-form-item prop="password">
          <el-input style="width: 300px;font-size: 18px;margin-left: 10px;margin-top: 10px;" 
          size="small" v-model="user.password" type="password"
          placeholder="请输入密码"></el-input>
        </el-form-item>
        <span class="forget" @click="$router.push('/reset')">忘记密码？点击重置</span>
      </div>
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="subLogin()" style="width: 300px;">
        登录
      </el-button>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive,ref} from 'vue'
import {reqLogUser,reqGetUserinfo} from '@/api/user'
import { useRouter } from 'vue-router'

import NProgress from "nprogress";

import "nprogress/nprogress.css"

// 取消进度条加载圆圈
NProgress.configure({ showSpinner: false });

const $router=useRouter()

// 登录表单实例
let form_login_user=ref()
// 存储登录时用户输入的账号和密码
let user=reactive({
  account:'',
  password:'',
  id:''
})

onMounted(()=>{
  form_login_user.value.resetFields(); 
})


//用户名校验 
const validateUsername = (rule, value, callback) => {
const usernamePattern = /^[A-Za-z0-9\u4e00-\u9fa5]{1,10}$/; // 匹配字母、数字和汉字，长度在1到10之间
if (!value) {
  callback(new Error('用户名不能为空'));
} else if (!usernamePattern.test(value)) {
  callback(new Error('用户名只能包含字母、数字或汉字，且长度在1到10之间'));
} else {
  callback();
}
};
//用户密码校验
const validatePassword = (rule, value, callback) => {
  const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,10}$/; // 只能包含字母或数字，长度在8到10之间
  if (!value) {
    callback(new Error('密码不能为空'));
  } else if (!passwordPattern.test(value)) {
    callback(new Error('密码必须包含字母和数字，且长度在8到10之间'));
  } else {
    callback();
  }
};
//登录校验规则 
const rules_login={

  account:[{trigger:'blur'},
  {validator:validateUsername,trigger:'blur'}],

  password:[{trigger:'blur'},
  {validator:validatePassword,trigger:'blur'}],
}

// 存储用户详细信息
let UserStore=JSON.parse(localStorage.getItem('USERSTORE'))||reactive({
  account:'',
  age:null,
  idCard:'',
  phone:'',
  password:'',
  confirmPassword:'',
  sex:'',
  token:''
})

// 点击登录
const subLogin=async ()=>{
  await form_login_user.value.validate()
  // console.log(user.account,user.password,user.id)
    let res=await reqLogUser(user.account,user.password)
    
    // console.log(res)
    if(res.data.code){
      UserStore.token=res.data.data
      localStorage.setItem('TOKEN',res.data.data)
      // 获取用户详细信息
      NProgress.start()
      let info=await reqGetUserinfo()
      // console.log(info)
      if(info.data.code){
        UserStore.account=info.data.data.username
        UserStore.sex=info.data.data.sex
        UserStore.phone=info.data.data.phone
        localStorage.setItem('USERSTORE',JSON.stringify(UserStore))
        localStorage.setItem('NAME',info.data.data.username)
        localStorage.setItem('UID',info.data.data.id)
        localStorage.setItem('PASSWORD',info.data.data.password)
        $router.push('/home')
        NProgress.done()
      }
      // location.reload(true);
    }else{
      alert(`${res.data.msg}`)
    }

}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'Maxlock';
  src: url('../../../assets/fonts/Maxlock.otf') format('opentype'), /* 优先加载 woff2 */
      url('../../../assets/fonts/Maxlock.ttf') format('truetype'),   /* 次优先加载 woff */
}
.root{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 1200px;
  .icon{
    display: flex;
    margin-right: 180px;
    margin-top: 5%;
    margin-left: 160px;

    img{
      width: 80px;
      height: 80px;
    }
    span{
      font-size: 36px;
      margin-left: 30px;
      margin-top: 20px;
      font-weight: 600;
      background: linear-gradient(45deg, #c2e9fb, #a1c4fd);
      -webkit-background-clip: text;
      color: transparent;
    }
  }
  .login{
    // margin-top: 20px;
    margin-left: 10%;
    .select{
      display: flex;
    }
  }
  .user{
    display: flex;
    margin-bottom: 30px;
    p{
      font-size: 18px;
    }
    span{
      font-size: 16px;
      width: 180px;
    }
    span:hover{
      cursor: pointer;
      color: #bbb;
    }
  }
  .forget{
    color:#0984e3;
    margin-left: 10px;
    margin-top: 20px;
  }
  .footer{
    margin-left: 10%;
    margin-right: 180px;
  }
}
</style>
